<template>
  <div class="container-box">
    <el-container class="content-box">
      <el-aside class="aside-item"  :width="asideWidthCalc">
        <logo-com ref="logoComRef"></logo-com>
        <side-menu ref="sideMenuRef" :menus="menus"></side-menu>
      </el-aside>
      <el-container>
        <el-header class="header-item">
          <header-com :isCollapse="isCollapse" @changeCollapseFn="changeCollapseFn"></header-com>
        </el-header>
        <el-main class="main-item">
            <tab-bar></tab-bar>
            <div class="main-content-box">
              <router-view></router-view>
            </div>            
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
    import SideMenu from './sideMenu'
    import logoCom from '@/components/logoCom'
    import headerCom from './headerCom'
    import tabBar from '@/components/tabBar'
    import {useStore} from 'vuex'
    import { ref,computed } from 'vue'
    import menus from '@/utils/menulist.js'
    // let isCollapse = ref(false)
    const store = useStore()    
    let isCollapse =  ref(store.state.isCollapse)
    //接受子组件触发的事件
    const sideMenuRef = ref(null)
    const logoComRef = ref(null)    
    function changeCollapseFn(collapseVal:boolean){
        isCollapse = collapseVal
        sideMenuRef.value.isCollapse = isCollapse
        logoComRef.value.isCollapse = isCollapse
    }    
    const asideWidthCalc =  computed(()=>{    
      if(isCollapse.value){
        return 60
      }
      return 200      
    })
    // let asideWidth = ref('200px')
    console.log('sideMenuRef', sideMenuRef)
   

</script>
<style lang="scss" scoped>
.content-box{
    height:100vh;
    .aside-item{
        // background: #8284fa;
        height:100%;
        // background: #8284fa;
    }
    .header-item{
        // background: #EEF0FA;
        height: $headerHieght;
        padding: 0;
    }
    .main-item{        
        min-height: calc(100vh - $headerHieght);
        background: #F1F3F4;
        padding: 0;
        .main-content-box{
          margin: 10px 0 0 10px;
          min-height: calc(100vh - $headerHieght - 54px );
          background: #fff;
          border-radius: 4px;
        }
    }
}
</style>